"use strict";

angular.module('app.yksensor').directive('flotAutoUpdatingChart', function ($timeout, FlotConfig) {
    return {
        restrict: 'E',
        replace: true,
        template: '<div class="chart"></div>',
        scope: {
            data: '='
        },
        link: function (scope, element) {

            // For the demo we use generated data, but normally it would be coming from the server
            var data = [], totalPoints = 200;
            function getRandomData() {
                if (data.length > 0)
                    data = data.slice(1);

                // do a random walk
                while (data.length < totalPoints) {
                    var prev = data.length > 0 ? data[data.length - 1] : 50;
                    var y = prev + Math.random() * 10 - 5;
                    if (y < 0)
                        y = 0;
                    if (y > 100)
                        y = 100;
                    data.push(y);
                }

                // zip the generated y values with the x values
                var res = [];
                for (var i = 0; i < data.length; ++i)
                    res.push([i, data[i]])
                return res;
            }

            // setup control widget
            var updateInterval = 1000;
            element.val(updateInterval).change(function () {
                var v = $(this).val();
                if (v && !isNaN(+v)) {
                    updateInterval = +v;
                    if (updateInterval < 1)
                        updateInterval = 1;
                    if (updateInterval > 2000)
                        updateInterval = 2000;
                    $(this).val("" + updateInterval);
                }
            });

            // setup plot
            var options = {
                yaxis: {
                    min: 0,
                    max: 100
                },
                xaxis: {
                    min: 0,
                    max: 100
                },
                colors: [FlotConfig.chartFourth],
                series: {
                    lines: {
                        lineWidth: 1,
                        fill: true,
                        fillColor: {
                            colors: [{
                                opacity: 0.4
                            }, {
                                opacity: 0
                            }]
                        },
                        steps: false

                    }
                }
            };
            var plot = $.plot(element, [getRandomData()], options);

            function update() {
                plot.setData([getRandomData()]);
                // since the axes don't change, we don't need to call plot.setupGrid()
                plot.draw();

                $timeout(update, updateInterval);
            }

            update();
        }
    }
});

"use strict";

angular.module('app.yksensor').directive('flotBarChart', function (FlotConfig) {
    return {
        restrict: 'E',
        replace: true,
        template: '<div class="chart"></div>',
        scope: {
            data: '='
        },
        link: function (scope, element) {

            $.plot(element, scope.data, {
                colors: [FlotConfig.chartSecond, FlotConfig.chartFourth, "#666", "#BBB"],
                grid: {
                    show: true,
                    hoverable: true,
                    clickable: true,
                    tickColor: FlotConfig.chartBorderColor,
                    borderWidth: 0,
                    borderColor: FlotConfig.chartBorderColor
                },
                legend: true,
                tooltip: true,
                tooltipOpts: {
                    content: "<b>%x</b> = <span>%y</span>",
                    defaultTheme: false
                }

            });
        }
    }
});

'use strict';

angular.module('app.yksensor').directive('flotBasic', function () {
    return {
        restrict: 'A',
        scope: {
            data: '=flotData',
            options: '=flotOptions'
        },
        link: function (scope, element, attributes) {
            var plot = $.plot(element, scope.data, scope.options);

            scope.$watchCollection('data', function (newData, oldData) {
                if (newData != oldData) {
                    plot.setData(newData);
                    plot.draw();
                }
            });
        }
    }
});

"use strict";


angular.module('app.yksensor').value('FlotConfig', {
    "chartBorderColor": "#efefef",
    "chartGridColor": "#DDD",
    "charMain": "#E24913",
    "chartSecond": "#6595b4",
    "chartThird": "#FF9F01",
    "chartFourth": "#7e9d3a",
    "chartFifth": "#BD362F",
    "chartMono": "#000"

});

"use strict";

angular.module('app.yksensor').directive('flotFillChart', function () {
    return {
        restrict: 'E',
        replace: true,
        template: '<div class="chart"></div>',
        scope: {
            data: '='
        },
        link: function (scope, element) {

            $.plot(element, scope.data, {

                xaxis: {
                    tickDecimals: 0
                },

                yaxis: {
                    tickFormatter: function (v) {
                        return v + " cm";
                    }
                }

            });
        }
    }
})

"use strict";

angular.module('app.yksensor').directive('flotHorizontalBarChart', function (FlotConfig) {
    return {
        restrict: 'E',
        replace: true,
        template: '<div class="chart"></div>',
        scope: {
            data: '='
        },
        link: function (scope, element) {
            $.plot(element, scope.data, {
                colors: [FlotConfig.chartSecond, FlotConfig.chartFourth, "#666", "#BBB"],
                grid: {
                    show: true,
                    hoverable: true,
                    clickable: true,
                    tickColor: FlotConfig.chartBorderColor,
                    borderWidth: 0,
                    borderColor: FlotConfig.chartBorderColor
                },
                legend: true,
                tooltip: true,
                tooltipOpts: {
                    content: "<b>%x</b> = <span>%y</span>",
                    defaultTheme: false
                }
            });
        }
    }
});

"use strict";

angular.module('app.yksensor').directive('flotPieChart', function () {
    return {
        restrict: 'E',
        replace: true,
        template: '<div class="chart"></div>',
        scope: {
            data: '='
        },
        link: function (scope, element) {
            $.plot(element, scope.data, {
                series: {
                    pie: {
                        show: true,
                        innerRadius: 0.5,
                        radius: 1,
                        label: {
                            show: false,
                            radius: 2 / 3,
                            formatter: function (label, series) {
                                return '<div style="font-size:11px;text-align:center;padding:4px;color:white;">' + label + '<br/>' + Math.round(series.percent) + '%</div>';
                            },
                            threshold: 0.1
                        }
                    }
                },
                legend: {
                    show: true,
                    noColumns: 1, // number of colums in legend table
                    labelFormatter: null, // fn: string -> string
                    labelBoxBorderColor: "#000", // border color for the little label boxes
                    container: null, // container (as jQuery object) to put legend in, null means default on top of graph
                    position: "ne", // position of default legend container within plot
                    margin: [5, 10], // distance from grid edge to default legend container within plot
                    backgroundColor: "#efefef", // null means auto-detect
                    backgroundOpacity: 1 // set to 0 to avoid background
                },
                grid: {
                    hoverable: true,
                    clickable: true
                },
            });

        }
    }
});

"use strict";

angular.module('app.yksensor').directive('flotSalesChart', function (FlotConfig) {
    return {
        restrict: 'E',
        replace: true,
        template: '<div class="chart"></div>',
        scope: {
            data: '='
        },
        link: function (scope, element) {

            $.plot(element, [scope.data], {
                xaxis: {
                    mode: "time",
                    tickLength: 5
                },
                series: {
                    lines: {
                        show: true,
                        lineWidth: 1,
                        fill: true,
                        fillColor: {
                            colors: [{
                                opacity: 0.1
                            }, {
                                opacity: 0.15
                            }]
                        }
                    },
                    //points: { show: true },
                    shadowSize: 0
                },
                selection: {
                    mode: "x"
                },
                grid: {
                    hoverable: true,
                    clickable: true,
                    tickColor: FlotConfig.chartBorderColor,
                    borderWidth: 0,
                    borderColor: FlotConfig.chartBorderColor
                },
                tooltip: true,
                tooltipOpts: {
                    content: "Your sales for <b>%x</b> was <span>$%y</span>",
                    dateFormat: "%y-%0m-%0d",
                    defaultTheme: false
                },
                colors: [FlotConfig.chartSecond]

            });

        }
    }
});

"use strict";

angular.module('app.yksensor').directive('flotSinChart', function (FlotConfig) {
    return {
        restrict: 'E',
        replace: true,
        template: '<div class="chart"></div>',
        scope: {
            data: '=flotData'
        },
        link: function (scope, element) {

            var plot = $.plot(element, scope.data, {
                series: {
                    lines: {
                        show: true
                    },
                    points: {
                        show: true
                    }
                },
                grid: {
                    hoverable: true,
                    clickable: true,
                    tickColor: FlotConfig.chartBorderColor,
                    borderWidth: 0,
                    borderColor: FlotConfig.chartBorderColor
                },
                tooltip: true,
                tooltipOpts: {
                    //content : "Value <b>$x</b> Value <span>$y</span>",
                    defaultTheme: false
                },
                colors: [FlotConfig.chartSecond, FlotConfig.chartFourth],
                yaxis: {
                    min: 0.0,
                    max: 50.0
                },
                xaxis: {
                    min: 0,
                    max: 10
                }
            });

            element.on("plotclick", function (event, pos, item) {
                if (item) {
                    $("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ".");
                    plot.highlight(item.series, item.datapoint);
                }
            });
        }
    }
});


"use strict";

angular.module('app.yksensor').directive('flotSiteStatsChart', function (FlotConfig) {
    return {
        restrict: 'E',
        replace: true,
        template: '<div class="chart"></div>',
        scope: {
            data: '='
        },
        link: function (scope, element) {

            $.plot(element, scope.data, {
                series: {
                    lines: {
                        show: true,
                        lineWidth: 1,
                        fill: true,
                        fillColor: {
                            colors: [{
                                opacity: 0.1
                            }, {
                                opacity: 0.15
                            }]
                        }
                    },
                    points: {
                        show: true
                    },
                    shadowSize: 0
                },

                yaxes: [{
                    min: 20,
                    tickLength: 5
                }],
                grid: {
                    hoverable: true,
                    clickable: true,
                    tickColor: FlotConfig.chartBorderColor,
                    borderWidth: 0,
                    borderColor: FlotConfig.chartBorderColor
                },
                tooltip: true,
                tooltipOpts: {
                    content: "%s for <b>%x:00 hrs</b> was %y",
                    dateFormat: "%y-%0m-%0d",
                    defaultTheme: false
                },
                colors: [FlotConfig.charMain, FlotConfig.chartSecond],
                xaxis: {
                    mode: "time",
                    tickLength: 10,
                    ticks: 15,
                    tickDecimals: 2
                },
                yaxis: {
                    ticks: 15,
                    tickDecimals: 0
                }
            });

        }
    }
});